<template>
    <div class="divCommomStyle">
      <div class="content">
        <div class="title">
            <div class="top">
                <span>安全运行天数</span>
                <span>{{currentDate}}</span>
            </div>
            <div class="bottom">
                <div class="leftDay">
                    <div class="text" v-for="(item, index) in timeData.days" :key="'days-'+index">
                        <span>{{item}}</span>
                    </div>
                    <b>天</b>
                </div>
                <div class="centerDay">
                    <div class="text" v-for="(item, index) in timeData.hours" :key="'hours-'+index">
                        <span>{{item}}</span>
                    </div>
                    <b>时</b>
                    <div class="text" v-for="(item, index) in timeData.min" :key="'min-'+index">
                        <span>{{item}}</span>
                    </div>
                    <b>分</b>
                </div>
                <div class="rightDay">
                    <div class="text" v-for="(item, index) in timeData.sec" :key="'sec-'+index">
                        <span>{{item}}</span>
                    </div>
                    <b>秒</b>
                </div>
            </div>
        </div>
        <div class="centerChart">
            <div class="title">
                <div class="left">
                    <span>2019-12-20运行情况</span>
                </div>
                <div class="right">
                    <div class="text active"><span>日统计</span></div>
                    <div class="text"><span>月统计</span></div>
                    <div class="text"><span>年统计</span></div>
                </div>
            </div>
            <div class="chartBox">
                <div id="rosePieChart" :style="{width: '100%', height: '100%'}"></div>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
import {dateFormate, timeDiff} from '../../utils/common'
export default {
  data () {
    return {
      currentDate: new Date(),
      timer: null,
      roseChart: null,
      timeData: {
        days: [],
        hours: [],
        min: [],
        sec: []
      },
      chartRadius: [30, 180],
      clientHeight: '',
      clientWidth: ''
    }
  },
  created () {
    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.currentDate = dateFormate(new Date()) // 修改数据date
      _this.timeData = timeDiff('2011-12-01', _this.currentDate)
    }, 1000)
  },
  mounted () {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}`
    this.clientWidth = `${document.documentElement.clientWidth}`
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
    if (this.clientHeight <= 768 || this.clientWidth <= 1366) {
      this.chartRadius = [30, 90]
    }
    this.initRoseChart()
  },
  activated () {
    // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
    if (this.roseChart) {
      this.roseChart.resize()
    }
  },
  methods: {
    initRoseChart () {
      let option = {
        title: {
          text: `正在使用设备      1258台`,
          x: 'right',
          textStyle: {
            color: '#29adf1',
            fontSize: '14'
          }
        },
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        grid: {
          width: '50%',
          height: '50%',
          left: 0,
          top: '20%',
          right: '45%',
          containLabel: true
        },
        legend: {
          type: 'scroll',
          orient: 'vartical',
          top: '25%',
          right: '15',
          // left: '15',
          itemWidth: 20,
          itemHeight: 15,
          itemGap: 16,
          textStyle: {
            color: '#fff',
            fontSize: 14,
            fontWeight: 0
          },
          data: ['I类', 'Ⅱ类', 'Ⅲ类', 'Ⅳ类', 'Ⅴ类', 'Ⅵ类']
          // data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6']
        },
        calculable: true,
        series: [
          {
            name: '增值电信业务统计表',
            type: 'pie',
            radius: this.chartRadius,
            center: ['40%', '50%'],
            roseType: 'area',
            label: {
              normal: {
                show: true,
                formatter: '{c}',
                textStyle: {
                  fontSize: 12
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            data: [
              {value: 10, name: 'I类'},
              {value: 15, name: 'Ⅱ类'},
              {value: 5, name: 'Ⅲ类'},
              {value: 25, name: 'Ⅳ类'},
              {value: 35, name: 'Ⅴ类'},
              {value: 40, name: 'Ⅵ类'}
            ]
          }
        ]
      }
      this.roseChart = this.$echarts.init(document.getElementById('rosePieChart'))
      this.roseChart.setOption(option)
      window.addEventListener('resize', () => {
        this.roseChart.resize()
      })
    }
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style scoped>
.divCommomStyle{
  display: flex;
  height: 66%;
  justify-content: center;
  align-items: center;
}
.divCommomStyle .content{
    display: flex;
    flex-flow: column;
    justify-content: space-between;
}
.divCommomStyle .title .top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #29adf1;
}
.divCommomStyle .title .bottom{
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.divCommomStyle .title .bottom div.leftDay{
    flex:6;
}
.divCommomStyle .title .bottom div.centerDay{
    flex:6;
}
.divCommomStyle .title .bottom div.rightDay{
    flex:4;
    text-align: right;
}
.divCommomStyle .title .bottom div b{
    font-size: 12px;
    color: #29adf1;
}
.divCommomStyle .title .bottom .text{
    display: inline-block;
    height: 100%;
    padding: 0 5px;
    margin-left:5px;
    background: rgba(9, 42, 74, 0.8);
}
.divCommomStyle .title .bottom .text span{
    font-size: 2rem;
    background-image:-webkit-linear-gradient(bottom,#124192,#6ebae9,#aeeaf3);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.centerChart{
    display: flex;
    flex-flow: column;
    height:calc(100% - 90px);
    justify-content: space-between;
}
.centerChart .title{
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.centerChart .title .left span{
    font-size: 14px;
    color: #29adf1;
}
.centerChart .title .right .text{
    display: inline-block;
    padding:5px 10px;
    margin-left:15px;
    font-size: 14px;
    color: #fff;
    background: rgba(56, 75, 93, 0.7);
    cursor: pointer;
    transition: all 0.5s;
}
.centerChart .title .right .text:hover{
    background: rgba(15, 153, 223,1);
}
.centerChart .title .right .text.active{
    background: rgba(15, 153, 223,1);
}
.centerChart .chartBox {
    height:calc(100% - 45px)
}
</style>
